<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>chaof</title>
<link rel="icon" href="img/片1.ico" type="images/x-ico" />
<style>
    a:link{color: gray;}
	a:visited{color: darkgray;}
	a:hover{color: orangered;width: 100px;}
	*{margin: 0;
		padding: 0;
    box-sizing: border-box;
}
 
body {
  font-family: Arial;
  padding: 10px;
  background: #f1f1f1;
}
 

 
/* 创建两列 */
/* Left column */
.leftcolumn {   
  float: left;
  width: 75%;
}
 
/* 右侧栏 */
.rightcolumn {
  float: left;
  width: 25%;
  background-color: #f1f1f1;
  padding-left: 20px;
}
 
/* 图像部分 */
/*.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}
 */
/* 文章卡片效果 */
.card {
background-color: #DDDDDD;

 background-size:;
  padding: 20px;
  margin-top: 20px;
}
 
/* 列后面清除浮动 */
.row:after {
  content: "";
  display: table;
  clear: both;
}
 
/* 底部 */
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
  margin-top: 20px;
}
 
/* 响应式布局 - 屏幕尺寸小于 800px 时，两列布局改为上下布局 */
@media screen and (max-width: 800px) {
  .leftcolumn, .rightcolumn {   
    width: 100%;
    padding: 0;
  }
}
 
/* 响应式布局 -屏幕尺寸小于 400px 时，导航等布局改为上下布局 */
@media screen and (max-width: 400px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}
</style>
</head>
<body bgcolor="#555555">



<div class="row">
  <div class="leftcolumn">
    <div class="card" >
      <h5>超凡</h5>
      <h4> &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp  &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp  &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp  超凡</h4>
    <!--<img src="img/图片167.png" alt="Pulpit rock"  style="width: 1000px;" class="fakeimg">
      <p>超凡</p>-->
      <h3>chao凡超凡<h3>
      	 <h2>  &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp  &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp  &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp  &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp  &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp 超,凡超凡</h2>
      	  <h1>   &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp  &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp  &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp   &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp  &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp  &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp  &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp  &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp  &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp 超凡,超凡</h1>
      	   <h2>  &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp  &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp  &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp  &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp  &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp 超凡超.凡</h2>
      	  <h3>  &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp  &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp  &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp  &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp  &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp 超凡超</h3>
      	   <h4> &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp  &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp  &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp 凡超凡</h4>
      	    <h5>超fan</h5>
      	  
    </div>
    <div class="card">
      <!--<h2>文章标题</h2>
      <h5>2019 年 4 月 17日</h5>
      <div class="fakeimg" style="height:200px;">图片</div>
      <p>一些文本...</p>
      <p>菜鸟教程 - 学的不仅是技术，更是梦想！菜鸟教程 - 学的不仅是技术，更是梦想！菜鸟教程 - 学的不仅是技术，更是梦想！菜鸟教程 - 学的不仅是技术，更是梦想！</p>-->
   <img src="img/图片167.png" alt="Pulpit rock"  style="width: 100%;" class="fakeimg">
    </div>
  </div>
  <div class="rightcolumn">
    <div class="card">
      <!--<h2>关于我</h2>
      <div class="fakeimg" style="height:100px;">图片</div>
      <p>关于我的一些信息..</p>-->
       <img src="img/图片119.png" alt="Pulpit rock"  style="width: 100%;" class="fakeimg">
       <b style="color: darkred;">网工一班，胡超凡</b>
       <br />
       <b style="color:brown;">学号：202005565222</b>
        <br />
     <a href="http://hu-chaofan.gitee.io/teststart/#" style="color:red;" >大作业入口</a>
    </div>
    <div class="card">
      <h3>历次作业</h3>
      <!--<div class="fakeimg"><p>图片</p></div>
      <div class="fakeimg"><p>图片</p></div>
      <div class="fakeimg"><p>图片</p></div>-->
     <a href="index1.html" target="_blank"> 第一家公司（暂无）</a>
     <br />
     <a href="index2.html" target="_blank"> 第二家公司 （暂无）</a>
      <br />
     <a href="index3.html" target="_blank"> 第三家公司 （暂无）</a>
      <br />
     <a href="index4.html" target="_blank">第四家公司 </a>
      <br />
      <a href="改革开放40周年/index5.html" target="_blank"> 第五家公司</a>
        <br />
      <a href="http://hu-chaofan.gitee.io/test2020.11.24/" target="_blank"> 第六家公司</a>
      <p style="color:orangered; text-decoration：line-through;">本期看点：你能找到被隐藏音频窗口吗</p>
       <br />
      <a href="http://hu-chaofan.gitee.io/test2020.12.1/" target="_blank"> 第七家公司</a>
      <p style="color:orangered;text-decoration：line-through;">本期看点：右上角雪碧图的运用，以及背景图的设置</p>
      <br />
      <a href="http://hu-chaofan.gitee.io/test2020.12.9/" target="_blank"> 第八家公司</a>
      <p style="color:orangered;">本期看点：弹性盒子与媒体查询的综合运用，三种分辨率下的切换，介绍了下耳机flypods3，受限于图片清晰度，展示效果不佳( *￣▽￣)</p>
    </div>
    <div class="card">
      <h3>董事，胡</h3>
      <p>如有显示问题，还请联系制作者</p>
      <p>合作QQ:2772123665</p>
      <p>招商TEL:18821865606</p>
     
    </div>
  </div>
</div>



</body>
</html>